<script setup>
import { ref } from 'vue';
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/css';

import frankfurtImg from '@/assets/images/frankfurt.png';
import hamburgImg from '@/assets/images/hamburg.png';
import neussImg from '@/assets/images/hamburg.png';

const stores = ref([
  {
    name: 'Frankfurt',
    img: '../../../assets/images/frankfurt.png',
    location: 'Near the Hamburg port area in Germany, a 20 minute drive from the port to the warehouse',
    totalArea: '2000 square meters',
    storageType: 'Ordinary goods storage, dangerous goods storage',
    operatingTime: 'N24 hours',
    securityMeasures: '24/7 monitoring, access control management, fire protection system'
  },
  {
    name: 'Hamburg',
    img: '../../../assets/images/hamburg.png',
    location: 'Near the Hamburg port area in Germany, a 20 minute drive from the port to the warehouse',
    totalArea: '2000 square meters',
    storageType: 'Ordinary goods storage, dangerous goods storage',
    operatingTime: 'N24 hours',
    securityMeasures: '24/7 monitoring, access control management, fire protection system'
  },
  {
    name: 'Neuss',
    img: '../../../assets/images/hamburg.png',
    location: 'Near the Hamburg port area in Germany, a 20 minute drive from the port to the warehouse',
    totalArea: '8000 square meters',
    storageType: 'Ordinary goods storage',
    operatingTime: 'N24 hours',
    securityMeasures: '24/7 monitoring, access control management, fire protection system'
  }
]);
const requireImage = (url) => {
  return new URL(url, import.meta.url).href
}
const onSlideChange = (swiper) => {
  console.log('当前激活的Slide索引:', swiper.realIndex);
};

// 存储 Swiper 实例
const swiperInstance = ref(null);

// Swiper 初始化完成后触发
const onSwiperInitialized = (swiper) => {
  swiperInstance.value = swiper;
  // console.log('Swiper 已初始化', swiper); // 调试用
};


// 轮播索引
const indexSwiper = ref(0)
// 切换到上一组
const slidePrev = () => {
  if (swiperInstance.value) {
    swiperInstance.value.slidePrev();
    indexSwiper.value = swiperInstance.value.realIndex
    // console.log('切换到上一组', swiperInstance.value.realIndex); // 调试用
  }
};

// 切换到下一组
const slideNext = () => {
  if (swiperInstance.value) {
    swiperInstance.value.slideNext();
    indexSwiper.value = swiperInstance.value.realIndex
    // console.log('切换到下一组', swiperInstance.value.realIndex); // 调试用
  }
};
</script>
<template>
  <div class="warehouse-introduction">
    <div class="title">Warehouse Introduction</div>
    <div class="center">
      <div v-show="indexSwiper !== 0" class="left-arrow btn-pub" @click="slidePrev">
        <img src="@/assets/images/right-arrow.png" alt="">
      </div>
      <div v-show="indexSwiper !== stores.length - 2" class="right-arrow btn-pub" @click="slideNext">
        <img src="@/assets/images/right-arrow.png" alt="">
      </div>

      <swiper ref="swiperRef" :slides-per-view="2" :space-between="20" @slideChange="onSlideChange"
        @swiper="onSwiperInitialized">
        <swiper-slide v-for="(item, index) in stores" :key="index">
          <div class="pub">
            <img :src="requireImage(item.img)" alt="">
            <div class="adress">
              <div class="warehouse-name">
                {{ item.name }}
              </div>
              <div class="item">
                <div class="name">
                  <img class="icon" src="@/assets/images/location.png">
                  <span class="label">Location</span>
                </div>
                <div class="content">
                  {{ item.location }}
                </div>
              </div>
              <div class="item">
                <div class="name">
                  <img class="icon" src="@/assets/images/total.png">
                  <span class="label">Total area</span>
                </div>
                <div class="content">
                  {{ item.totalArea }}
                </div>
              </div>
              <div class="item">
                <div class="name">
                  <img class="icon" src="@/assets/images/storage.png">
                  <span class="label">Storage type</span>
                </div>
                <div class="content">
                  {{ item.storageType }}
                </div>
              </div>
              <div class="item">
                <div class="name">
                  <img class="icon" src="@/assets/images/operating.png">
                  <span class="label">Operating time</span>
                </div>
                <div class="content">
                  {{ item.operatingTime }}
                </div>
              </div>
              <div class="item">
                <div class="name">
                  <img class="icon" src="@/assets/images/security.png">
                  <span class="label">Security measures</span>
                </div>
                <div class="content">
                  {{ item.securityMeasures }}
                </div>
              </div>
              <div class="map">
                Google Maps
              </div>
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>
<style lang="scss" scoped>

.warehouse-introduction {
  height: 100%;
  margin: 0 auto;
  padding: 57px 0px 66px 0px;
  position: relative;
  box-sizing: border-box;

  .title {
    font-weight: bold;
    font-size: 32px;
    text-align: center;
    color: #fff;
  }

  .center {
    width: 1200px;
    margin: 40px auto 0px;
    display: flex;
    justify-content: space-between;
    // overflow: hidden;
    gap: 20px;
    position: relative;
    .pub {
      width: 590px;
      height: 775px;
      flex-shrink: 0;
    }

    .adress {
      width: 100%;
      height: 474px;
      background: #fff;
      padding: 31px 35px;
      position: relative;

      .warehouse-name {
        font-weight: bold;
        font-size: 22px;
        color: #fff;
        width: 239px;
        height: 76px;
        background: #5B108E;
        border-radius: 0px 0px 0px 0px;
        border: 6px solid #fff;
        position: absolute;
        right: 30px;
        top: -50px;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 92px;
          height: 75px;
        }
      }

      .item {
        &:not(:first-child) {
          margin: 8px 0px 0px 0px;
        }

        .name {
          display: flex;
          align-items: center;

          .icon {
            width: 17px;
            height: 17px;
          }

          .label {
            font-weight: bold;
            font-size: 18px;
            color: #5B108E;
            margin: 0px 0px 0px 8px;
          }
        }

        .content {
          margin: 10px 0px 0px 0px;
          font-size: 14px;
          color: #666666;
        }
      }

      .map {
        width: 273px;
        height: 53px;
        background: #fff;
        border-radius: 27px;
        border: 1px solid #5B108E;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #5B108E;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #5B108E;
        margin: 36px auto 0px;
        cursor: pointer;
      }
    }
  }
  .btn-pub{
    width: 71px;
    height: 71px;
    position: absolute;
    top: 50%;
    transform: translate(0px,-50%);
    cursor:pointer;
  }

  .left-arrow{
    transform: rotate(-180deg);
    left: -120px;
  }
  .right-arrow{
    right: -120px;
  }
}
</style>
